<template>
    <div class="app">
        <Header/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                <coreL/>
                <div class="datare">
                  <div class="ra">填写体验报告</div>
                   <div class="asdasda"></div>
                    <div class="forms">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                      <el-form-item label="职业：" prop="name">
                        <el-select v-model="ruleForm.occupation"  placeholder="">
                          <el-option label="区域一" value="shanghai"></el-option>
                          <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                      </el-form-item>

                      <el-form-item label="品牌喜好：" >
                        <el-input v-model="ruleForm.brandLove" style="width: 30%;"></el-input>
                      </el-form-item>

                      <el-form-item label="性别：" >
                        <el-select v-model="ruleForm.sex" style="width: 30%;">
                          <el-option label="男" value="1"></el-option>
                          <el-option label="女" value="0"></el-option>
                        </el-select>
                      </el-form-item>

                      <el-form-item label="身高：" >
                        <el-input v-model="ruleForm.height" style="width: 30%;"></el-input>
                      </el-form-item>

                      <el-form-item label="体重：" prop="bian">
                        <el-input v-model="ruleForm.bodyWeight" style="width: 30%;"></el-input>
                      </el-form-item>

                      <el-form-item label="年龄：" prop="bian">
                        <el-input v-model="ruleForm.age" style="width: 30%;"></el-input>
                      </el-form-item>

                      <el-form-item label="星座：" prop="bian">
                        <el-input v-model="ruleForm.bian" style="width: 30%;"></el-input>
                      </el-form-item>

                      <el-form-item label="风格喜好：" >
                        <el-input v-model="ruleForm.style" style="width: 30%;"></el-input>
                      </el-form-item>

                      <el-form-item label="面料/材质喜好：" prop="bian">
                        <el-input v-model="ruleForm.texture" style="width: 30%;"></el-input>
                      </el-form-item>

                      <el-form-item label="肤质：" prop="bian">
                        <el-input v-model="ruleForm.skinQuality" style="width: 30%;"></el-input>
                      </el-form-item>

                      <el-form-item label="皮肤问题：" prop="bian">
                        <el-input v-model="ruleForm.skinProblems" style="width: 30%;"></el-input>
                      </el-form-item>

                      <el-form-item label="产品体验详情" prop="desc">
                        <el-input type="textarea" v-model="ruleForm.productExperience" style="width: 50%;"></el-input>
                      </el-form-item>

                      <el-form-item label="上传图片">
                        <el-upload
                          action="http://47.105.66.232:8091/uploadImage"
                          list-type="picture-card"
                          :limit=5
                          :auto-upload="false">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                              <img
                                class="el-upload-list__item-thumbnail"
                                :src="file.url" alt=""
                              >
                              <span class="el-upload-list__item-actions">
                                <span
                                  v-if="!disabled"
                                  class="el-upload-list__item-delete"
                                  @click="handleRemove(file)"
                                >
                                  <i class="el-icon-delete"></i>
                                </span>
                              </span>
                            </div>
                        </el-upload>
                      </el-form-item>

                      <el-form-item label="产品亮点推荐" prop="desc">
                        <el-input type="textarea" v-model="ruleForm.productHighlights" style="width: 50%;"></el-input>
                      </el-form-item>

                      <el-form-item label="产品优化建议" prop="desc">
                        <el-input type="textarea" v-model="ruleForm.productOptimization" style="width: 50%;"></el-input>
                      </el-form-item>

                      <el-form-item label="体验感评分：" prop="desc">
                        <el-rate
                          v-model="score"
                          show-text>
                        </el-rate>
                      </el-form-item>



                      <el-form-item style="margin-left: 347px;">
                        <el-button type="danger" @click="submitForm('ruleForm')">提交</el-button>

                      </el-form-item>
                    </el-form>
                  </div>

                </div>
              </div>
              <coreF/>
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import coreL from '@/components/coreL'
import coreF from '@/components/coreF'
import axios from 'axios'
export default {
    components: {
    Header,
    Footer,
    coreL,
    coreF
    },
    data() {
      return {
       inuser:'',
       score: null,
       dialogImageUrl:'',
       disabled: false,
       ruleForm: {
          occupation: '',
          brandLove:'',
          sex:'',
          bodyWeight: '',
          age: '',
          bian:'',
          style:'',
          texture:'',
          skinQuality:'',
          skinProblems:'',
          productExperience:'',
          productHighlights:'',
          productOptimization:'',
          reportImga:'',
          reportImgb:'',
          reportImgc:'',
          reportImgd:'',
          reportImge:'',
        },
        rules: {
          name: [
            { required: true, message: '请输入您的姓名', trigger: 'blur' }
          ],
          posin : [
            { required: true, message: '请输入您的电话', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '请输入您的详细地址', trigger: 'blur' }
          ]
        },
      }

    },
    methods: {
      async submitForm() {
          
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleRemove(file) {
        console.log(file);
        this.dialogImageUrl = file.url;
      },
    },
}
</script>
<style scoped>
.app  /deep/  .ist_l .ist_c li:nth-child(2) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.app  /deep/ .dawofe a {
      color: #ff9381;
}
.el-rate {
  margin-top: 10px;
}
.flex_lr {
  display: flex;
  justify-content: space-between;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.back {
    background-color: #f06048
}
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee
}
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.datare {
  width: 930px;
  height: inherit;
  border-radius: 6px;
  background-color: #fff
}

.datare .ra {
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 43px;
  margin-left: 14px;
  position: relative;
  top: 15px;
  width: 192px;
	height: 43px;
	background-color: #f06048;
	box-shadow: 0px 4px 2px 0px
		rgba(70, 23, 15, 0.38);
	border-radius: 0px 0px 20px 20px;
}
.asdasda {
  font-family: SourceHanSansCN-Regular;
	font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #434343;
  border-bottom: 1px solid #dcdcdc;
  margin-top: 30px;
      margin-bottom: 15px;
    line-height: 46px;
    color: #434343
}
.dieiio {
  width: 350px;
  display: flex;
    justify-content: space-between;
}
.dieiio div {
  font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #434343;
}

</style>
